<template>
  <div class="bg-white mt-3 pb-4">
    <div class="flex justify-between items-center px-4 py-3">
      <h3 class="font-medium">附近商家</h3>
      <div class="text-sm text-gray-500 flex items-center">
        <span>筛选</span>
        <i class="fa fa-chevron-down ml-1 text-xs"></i>
      </div>
    </div>

    <div class="divide-y">
      <div
          v-for="merchant in filteredMerchants"
          :key="merchant.id"
          class="px-4 py-3 flex gap-3 cursor-pointer"
          @click="handleMerchantClick(merchant.id)"
      >
        <img :src="merchant.image" alt="" class="w-20 h-20 object-cover rounded-md">
        <div class="flex-1">
          <div class="flex justify-between">
            <h4 class="font-medium">{{ merchant.name }}</h4>
            <span class="bg-red-100 text-red-600 text-xs px-1 rounded">蜂鸟专送</span>
          </div>
          <div class="flex items-center mt-1">
            <span class="text-orange-500 text-xs font-medium">{{ merchant.rating }}</span>
            <span class="text-gray-400 text-xs mx-1">|</span>
            <span class="text-gray-500 text-xs">{{ merchant.sales }}人已买</span>
          </div>
          <div class="flex items-center mt-1">
            <span class="text-gray-500 text-xs">{{ merchant.distance }}km</span>
            <span class="text-gray-400 text-xs mx-1">|</span>
            <span class="text-gray-500 text-xs">{{ merchant.deliveryTime }}分钟</span>
          </div>
          <div class="flex items-center mt-1">
            <span class="bg-primary-500/10 text-primary-500 text-xs px-1 rounded mr-1">满减</span>
            <span class="text-gray-500 text-xs">{{ merchant.promotion }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, defineProps, defineEmits } from 'vue'

const props = defineProps({
  categoryId: {
    type: Number,
    default: null
  }
})

const emits = defineEmits(['merchant-click'])

const merchants = ref([
  {
    id: 1,
    name: '万家饺子（软件园E18店）',
    image: './img/sj01.png',
    rating: 4.8,
    sales: 1234,
    distance: 1.2,
    deliveryTime: 30,
    promotion: '满20减5，满50减15',
    categoryIds: [1, 4]
  },
  {
    id: 2,
    name: '小锅饭豆腐馆（全运店）',
    image: './img/sj02.png',
    rating: 4.7,
    sales: 987,
    distance: 0.8,
    deliveryTime: 25,
    promotion: '满30减8，满60减20',
    categoryIds: [1, 4]
  },
  {
    id: 3,
    name: '麦当劳麦乐送（全运路店）',
    image: './img/sj03.png',
    rating: 4.9,
    sales: 765,
    distance: 2.5,
    deliveryTime: 45,
    promotion: '满100减20，满200减50',
    categoryIds: [1, 5]
  },
  {
    id: 4,
    name: '米村拌饭（浑南店）',
    image: './img/sj04.png',
    rating: 4.6,
    sales: 543,
    distance: 1.5,
    deliveryTime: 35,
    promotion: '第二杯半价',
    categoryIds: [1, 9]
  },
  {
    id: 5,
    name: '申记串道（中海康城店）',
    image: './img/sj05.png',
    rating: 4.5,
    sales: 432,
    distance: 0.7,
    deliveryTime: 20,
    promotion: '满30减5，满50减10',
    categoryIds: [1, 6]
  }
])

const filteredMerchants = computed(() => {
  if (!props.categoryId) return merchants.value

  return merchants.value.filter(merchant =>
      merchant.categoryIds.includes(props.categoryId)
  )
})

const handleMerchantClick = (merchantId) => {
  emits('merchant-click', merchantId)
}
</script>